<template>
  <div style="padding: 20px">
    <el-card>
      <div style="height: 100px">
        <el-form style="display: flex; flex-wrap: wrap">
          <el-form-item label="标签名称" label-width="75px" style="width: 25%">
            <el-input
              size="small"
              placeholder="请输入"
              v-model="searchForm.tags"
            ></el-input>
          </el-form-item>
          <el-form-item label="城市" label-width="75px" style="width: 25%">
            <el-select
              @change="provinceChange"
              filterable
              size="small"
              style="width: 100%"
              v-model="value1"
              placeholder="请选择"
            >
              <el-option
                v-for="item in form.province"
                :key="item.value"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地区" label-width="75px" style="width: 25%">
            <el-select
              @change="cityChange"
              ref="cityRef"
              filterable
              size="small"
              style="width: 100%"
              v-model="value2"
              placeholder="请选择"
            >
              <el-option v-for="item in form.city" :key="item" :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业简称" label-width="75px" style="width: 25%">
            <el-input size="small" v-model="searchForm.shortName"></el-input>
          </el-form-item>
          <el-form-item label="状态" label-width="75px" style="width: 25%">
            <el-select
              @change="changeState"
              style="width: 100%"
              size="small"
              v-model="searchForm.state"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-button
            @click="clearForm"
            size="small"
            style="width: 54px; height: 32px; margin-left: 35px"
            >清空</el-button
          >
          <el-button
            @click="searchList"
            size="small"
            style="width: 54px; height: 32px"
            type="primary"
            >搜索</el-button
          >
          <div style="margin-left: auto">
            <el-button
              @click="addUser"
              size="small"
              style="width: 97px"
              type="success"
              icon="el-icon-edit"
              >新增用户</el-button
            >
          </div>
        </el-form>
      </div>
      <el-alert style="margin-top: 12px" type="info" show-icon :closable="false"
        >共 {{ lists.counts }} 条记录</el-alert
      >
      <el-table
        :data="lists.items"
        style="width: 100%; margin-top: 20px"
        :highlight-current-row="true"
      >
        <el-table-column
          align="center"
          prop="id"
          label="序号"
          width="187"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="number"
          label="企业编号"
        ></el-table-column>
        <el-table-column align="center" prop="shortName" label="企业简称">
        </el-table-column>
        <el-table-column align="left" prop="tags" label="标签">
        </el-table-column>
        <el-table-column align="center" prop="creatorID" label="创建者">
        </el-table-column>
        <el-table-column align="center" prop="addDate" label="创建日期">
        </el-table-column>
        <el-table-column align="center" prop="remarks" label="备注">
        </el-table-column>
        <el-table-column align="center" prop="state" label="状态">
          <template #default="scope">
            {{ scope.row.state === 1 ? "启用" : "禁用" }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <button
              style="margin-right: 5px"
              class="edit"
              @click="edit(scope.row)"
            >
              <i class="el-icon-edit"></i>
            </button>
            <el-tooltip
              v-if="!scope.row.state"
              class="item"
              effect="dark"
              content="启用"
              placement="top"
            >
              <button
                style="margin-right: 5px"
                class="enable"
                @click="check(scope.row)"
              >
                <i class="el-icon-check"></i>
              </button>
            </el-tooltip>
            <el-tooltip
              v-else
              class="item"
              effect="dark"
              content="禁用"
              placement="top"
            >
              <button
                style="margin-right: 5px"
                class="disable"
                @click="close(scope.row)"
              >
                <i class="el-icon-close"></i>
              </button>
            </el-tooltip>
            <button class="edit del" @click="del(scope.row)">
              <i class="el-icon-delete"></i>
            </button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <el-pagination
          @size-change="handleSizeChange($event)"
          @current-change="handleCurrentChange($event)"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout=" prev, pager, next, sizes, jumper"
          :background="true"
          :page-count="lists.pages"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <el-form
        style="width: 736px"
        :model="dialogForm"
        :rules="rules"
        ref="dialogFormRef"
      >
        <el-form-item label="企业名称" label-width="150px" prop="shortName">
          <el-input v-model="dialogForm.shortName"></el-input>
        </el-form-item>
        <el-form-item label="所属公司" label-width="150px" prop="company">
          <el-input v-model="dialogForm.company"></el-input>
        </el-form-item>
        <el-form-item label-width="150px"
          >https://www.tianyancha.com
          （在此可查询所属公司全称及简称）</el-form-item
        >
        <el-form-item label="城市地区" label-width="150px" prop="province">
          <el-select
            ref="dialogFormProvinceRef"
            style="width: 49%; margin-right: 2%"
            @change="dialogFormProvinceChange"
            filterable
            v-model="dialogFormProvince"
            placeholder="请选择"
          >
            <el-option
              v-for="item in form.province"
              :key="item.value"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-select
            style="width: 49%"
            @change="dialogCityChange"
            ref="dialogFormCityRef"
            filterable
            v-model="dialogFormCity"
            placeholder="请选择"
          >
            <el-option v-for="item in form.city" :key="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向 (企业标签)" label-width="150px" prop="tags">
          <el-input v-model="dialogForm.tags"></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="150px" prop="remarks">
          <el-input type="textarea" v-model="dialogForm.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
        style="display: block; text-align: center"
      >
        <el-button @click="clearDialog">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update, disabled, remove } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  data () {
    return {
      delList: {
        id: ''
      },
      changeStateList: {
        id: '',
        state: ''
      },
      title: '',
      dialogVisible: false,
      options: [
        {
          value: 1,
          label: '启用'
        },
        {
          value: 0,
          label: '禁用'
        }
      ],
      value1: '',
      value2: '',
      pages: {
        page: 1,
        pagesize: 10
      },
      lists: [],
      form: {
        page: 1,
        pagesize: 10,
        tags: '',
        province: [],
        city: [],
        shortName: '',
        state: ''
      },
      searchForm: {
        page: 1,
        pagesize: 10,
        tags: null,
        province: null,
        city: null,
        shortName: null,
        state: null
      },
      dialogForm: {
        city: null,
        company: null,
        isFamous: true,
        province: null,
        remarks: null,
        shortName: null,
        tags: null
      },
      dialogFormProvince: null,
      dialogFormCity: null,
      rules: {
        company: [
          { required: true, message: '所属公司不能为空', trigger: 'blur' }
        ],
        province: [{ required: true, message: '选择省份', trigger: 'blur' }],
        remarks: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
        shortName: [
          { required: true, message: '企业名称不能为空', trigger: 'blur' }
        ],
        tags: [{ required: true, message: '请输入标签', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getList()
    this.form.province = provinces()
  },
  methods: {
    async del (row) {
      this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.delList.id = row.id
          await remove(this.delList)
          this.getList()
          this.$message({
            type: 'success',
            message: '成功删除了用户!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作!'
          })
        })
    },
    async check (row) {
      this.$confirm('已成功启用, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.changeStateList.id = row.id
          this.changeStateList.state = row.isFamous === 1 ? 0 : 1
          await disabled(this.changeStateList)
          row.state = row.state === 1 ? 0 : 1
          this.$message({
            type: 'success',
            message: '已成功启用!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作!'
          })
        })
    },
    async close (row) {
      this.$confirm('已成功禁用, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.changeStateList.id = row.id
          this.changeStateList.state = row.isFamous === 1 ? 0 : 1
          await disabled(this.changeStateList)
          row.state = row.state === 1 ? 0 : 1
          this.$message({
            type: 'success',
            message: '已成功禁用!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作!'
          })
        })
    },
    edit (row) {
      this.title = '编辑用户'
      this.dialogVisible = true
      this.form.city = citys(row.province)
      this.dialogFormCity = row.city
      this.dialogFormProvince = row.province
      this.dialogForm = { ...row }
      this.dialogForm.isFamous = row.isFamous === 1
    },
    clearDialog () {
      this.dialogForm = {}
      this.dialogFormProvince = null
      this.dialogFormCity = null
      this.form.city = null
      this.dialogVisible = false
    },
    async handleClose () {
      this.dialogForm = {}
      this.dialogFormProvince = null
      this.dialogFormCity = null
      this.form.city = null
      await this.$refs.dialogFormRef.resetFields()
      this.dialogVisible = false
    },
    async save () {
      if (this.title === '创建用户') {
        await this.$refs.dialogFormRef.validate()
        await add(this.dialogForm)
        this.dialogForm = {}
        this.dialogFormProvince = null
        this.dialogFormCity = null
        this.form.city = null
        this.$message.success('添加成功')
        this.getList()
        this.dialogVisible = false
      } else {
        await update(this.dialogForm)
        this.dialogFormProvince = null
        this.dialogFormCity = null
        this.form.city = null
        this.$message.success('编辑成功')
        this.getList()
        this.dialogVisible = false
      }
    },
    dialogCityChange (val) {
      this.dialogForm.city = val
    },
    dialogFormProvinceChange (val) {
      this.form.city = citys(this.dialogFormProvince)
      this.dialogFormCity = this.form.city[0]
      this.dialogForm.province = val
      this.$nextTick(() => {
        this.dialogForm.city = this.$refs.dialogFormCityRef.query
      })
    },
    addUser () {
      this.title = '创建用户'
      this.dialogForm = {}
      this.dialogForm.isFamous = true
      this.dialogFormProvince = null
      this.dialogFormCity = null
      this.dialogVisible = true
    },
    async clearForm () {
      this.pages.page = 1
      this.pages.pagesize = 10
      this.searchForm = {}
      this.value1 = ''
      this.value2 = ''
      this.form.city = null
    },
    async searchList () {
      const res = await list(this.searchForm)
      this.lists = res.data
    },
    cityChange (val) {
      this.searchForm.city = val
    },
    changeState () {
    },
    provinceChange (val) {
      this.form.city = citys(this.value1)
      this.value2 = this.form.city[0]
      this.searchForm.province = val
      this.$nextTick(() => {
        this.searchForm.city = this.$refs.cityRef.query
      })
    },
    async handleSizeChange (e) {
      this.pages.pagesize = e
      this.getList()
    },
    async handleCurrentChange (e) {
      this.pages.page = e
      this.getList()
    },
    async getList () {
      const res = await list(this.pages)
      this.lists = res.data
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-table__header{
  border-bottom: 1px solid #e8e8e8;
}
::v-deep .has-gutter {
  th {
    background-color: #fafafa;
  }
}
::v-deep .el-alert__icon {
  font-size: 18px;
}
.edit {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border: 1px solid #333;
  border-radius: 50%;
  cursor: pointer;
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  transition: all 0.1s;
}
.edit:hover {
  background-color: #409eff;
  color: #ffffff;
}
.del {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}
.del:hover {
  background-color: #f56c6c;
}
.enable {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border: 1px solid #333;
  border-radius: 50%;
  cursor: pointer;
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
  transition: all 0.1s;
}
.enable:hover {
  color: #ffffff;
  background-color: #67c23a;
}
.disable {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border: 1px solid #333;
  border-radius: 50%;
  cursor: pointer;
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
  transition: all 0.1s;
}
.disable:hover {
  color: #ffffff;
  background-color: #e6a23c;
}
.bottom {
  width: 100%;
  text-align: right;
}
</style>
